<template>
  <div class="dashboard-editor-container">
    <div style="width: 100%;">
      <el-row :gutter="10">
        <el-col :xs="8" :sm="6" :md="4" :lg="3">
          <el-button @click="getDataList"><i class="el-icon-refresh"/>{{$t('v520.refreshData')}}</el-button>
        </el-col>

        <el-col :xs="8" :sm="6" :md="4" :lg="3">
          <router-link to="/uniquephone/create">
            <el-button type="primary">
              <i class="el-icon-plus"/>
              {{$t('v520.createTask')}}
            </el-button>
          </router-link>
        </el-col>

        <el-col :xs="8" :sm="6" :md="4" :lg="3">
          <el-button @click="catLog" type="success">{{$t('v520.updateRecord')}}</el-button>
        </el-col>
      </el-row>
    </div>
    <el-table
      :data="tableData"
      style="width: 100%"
    >
      <el-table-column
        prop="id"
        :label="$t('v520.taskId')"
        width="100"
      >
      </el-table-column>
      <el-table-column
        prop="job_name"
        :label="$t('v520.taskName')"
      >
      </el-table-column>
      <el-table-column
        prop="status"
        :label="$t('v520.taskState')"
        width="130"
      >
        <template slot-scope="scope">
          <el-tag v-if="scope.row.status == 0">{{$t('v520.waitToRun')}}</el-tag>
          <el-tag v-if="scope.row.status == 1" type="warning"><i class="el-icon-loading"></i> {{$t('v520.running')}}</el-tag>
          <el-tag v-if="scope.row.status == 2" type="success"><i class="el-icon-circle-check"></i>{{$t('v520.success')}}</el-tag>
          <el-popover
            v-if="scope.row.status == 3"
            placement="top-start"
            :title="$t('v520.failReason')"
            width="200"
            trigger="hover"
            :content="scope.row.job_result"
          >
            <el-tag slot="reference" type="danger"><i class="el-icon-circle-close"></i>{{$t('v520.failure')}}</el-tag>
          </el-popover>

        </template>
      </el-table-column>
      <el-table-column
        prop="source"
        :label="$t('v520.dataSource')"
      >
        <template slot-scope="scope">
          <el-tag size="mini" type="info" v-for="item in scope.row.job_data.sourceFile" plain>
            {{ item.alias }}
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column
        prop="createtime"
        :label="$t('v520.createTime')"
        width="160"
      >
      </el-table-column>
      <el-table-column
        fixed="right"
        :label="$t('v520.operate')"
        width="100"
      >
        <template slot-scope="scope">

          <router-link v-if="scope.row.status == 2" :to="'/uniquephone/view-result/'+scope.row.id">
            <el-button type="text" size="small">{{$t('v520.viewResult')}}</el-button>
          </router-link>
          <!--          <el-button type="text" size="small">编辑</el-button>-->
        </template>
      </el-table-column>
    </el-table>
    <div style="width: 100%;text-align: right;padding-right: 20px;">
      <el-pagination
        background
        layout="prev, pager, next"
        :page-size="20"
        :current-page.sync="queryList.page"
        :total="total"
        @current-change="getDataList()"
      >
      </el-pagination>
    </div>

    <el-dialog
      title="已注册号码库更新记录"
      :visible.sync="dialogVisible"
      :width="dialogWidth"
    >
      <el-timeline
        style="width: 100%;height: 500px;overflow:auto"
        v-loading="logLoadding"
        element-loading-text="正在加载历史数据"
        element-loading-spinner="el-icon-loading"
        element-loading-background="rgba(0, 0, 0, 0.8)"
      >
        <el-timeline-item
          v-for="(item,index) in updateLog"
          :key="index"
          :icon="item.update_data.result?'el-icon-circle-check':'el-icon-circle-close'"
          :type="item.update_data.result?'success':'danger'"
          size="large"
          :timestamp="item.createtime"
        >
          【{{ item.platform_title }}】
          <el-tag v-if="item.update_data.result == true" type="success" effect="plain">更新成功</el-tag>
          <el-tag v-else type="danger" effect="plain">更新失败</el-tag>
          <br/>
          {{ item.update_data.msg }}
        </el-timeline-item>
      </el-timeline>
    </el-dialog>

  </div>
</template>

<script>
import { getList, getPlatformUserAddLog } from '@/api/jobs'

export default {
  name: 'uniquephone',
  created() {
    this.getDataList()
    this.setDialogWidth()
  },
  mounted() {
    window.onresize = () => {
      return (() => {
        this.setDialogWidth()
      })()
    }
  },
  data() {
    return {
      total: 0,
      queryList: {
        type: 1,
        limit: 20,
        page: 1
      },
      dialogWidth: '600px',
      logLoadding: false,
      dialogVisible: false,
      updateLog: [],
      tableData: []
    }
  },
  methods: {
    setDialogWidth() {
      console.log(document.body.clientWidth)
      var val = document.body.clientWidth
      const def = 600
      if (val < def) {
        this.dialogWidth = '100%'
      } else {
        this.dialogWidth = def + 'px'
      }
    },
    getDataList() {
      const loading = this.$loading({
        lock: true,
        text: this.$t('v520.getting'),
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.7)'
      })
      getList(this.queryList).then(res => {
        loading.close()
        this.tableData = res.data.rows
        this.total = res.data.total
      }).catch(e => {
        loading.close()
        this.$message.error('请求失败')
      })
    },
    catLog() {
      this.dialogVisible = true
      this.logLoadding = true
      getPlatformUserAddLog().then(res => {
        this.logLoadding = false
        if (res.code == 0) {
          this.updateLog = res.data
        }
      }).catch(e => {
        this.logLoadding = false
        this.$message.error(e.message)
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.dashboard-editor-container {
  background-color: #FFF;
  min-height: 100vh;
  padding: 40px 40px 0px;

  .pan-info-roles {
    font-size: 12px;
    font-weight: 700;
    color: #333;
    display: block;
  }

  .info-container {
    position: relative;
    margin-left: 190px;
    height: 150px;
    line-height: 200px;

    .display_name {
      font-size: 48px;
      line-height: 48px;
      color: #212121;
      position: absolute;
      top: 25px;
    }
  }
}
</style>
